<markdown>
  # 布局
  
  通过 `justify` 设置对其方式
</markdown>

<template>
  <div class="w400px p20px border-1 border-dark-3">
    <p>start</p>
    <x-space justify="start">
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
    </x-space>
    <br />

    <p>end</p>
    <x-space justify="end">
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
    </x-space>
    <br />

    <p>center</p>
    <x-space justify="center">
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
    </x-space>

    <p>space-between</p>
    <x-space justify="space-between">
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
    </x-space>

    <p>space-around</p>
    <x-space justify="space-around">
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
    </x-space>

    <p>space-evenly</p>
    <x-space justify="space-evenly">
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
      <x-button>按钮</x-button>
    </x-space>
  </div>
</template>